@import 'base.less';
@import 'common.less';

.lucky-list {
  width: 230pt;
  height: 18pt;
  line-height: 2;
  margin: auto;
  background-color: #f28300;
  color: #fff;
  font-size: 9pt;
  border-radius: 4px;
  position: absolute;
  bottom: 10px;
  left: 70pt;
  white-space: nowrap;
  overflow: hidden;
}

.lucky-list-inner {
  display: block;
  position: absolute;
  height:18pt;
  left: 100%;
  top: 0;
  animation: slide 15s linear infinite;
}

.lucky-item {
  display: inline-block;
}

// mobile布局
@media screen and (max-width: 768px) {
	.alert,.alert-error{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		.alert-body{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			background: #fff;
			height: 3.8rem;
			width: 4.72rem;
			.display-box();
			.box-orient(vertical);
			.box-align();
			
			h6{
				margin-top: 0;
				width: 100%;
				background: #265f73;
				color: #fff;
				height: 0.66rem;
				line-height: 0.66rem;
				text-align: center;
				font-size: 0.3rem;
			}
			p{
				.display-box();
				padding-bottom: 0.2rem;
				margin: 0 auto;
				text-align: center;
				color: #265f73;
				font-size: 0.3rem;
			}
			div{
				.display-box();
				width: 0.42rem;
				height: 0.42rem;
			}
			img{
				margin-top: 0.5rem;
				margin-bottom: 0.2rem;
				.display-box();
				width: 0.42rem;
				height: 0.42rem;
			}
			button{
				.display-box();
				cursor: pointer;
				margin: 0 auto;
				// margin-left: 66pt;
				color: #fff;
				height: 0.6rem;
				border: none;
				width: 2.28rem;
				background: #265f73;
				font-size: 0.3rem;
			}
		}
	}
	body{
		background: url(../img/turntable_background.jpg) no-repeat;
		background-size: cover;
	}

	table,.avatar{
		display: none;
	}
	.header-body{
		.display-box();
		.box-align();
		.box-pack();
	}
	.rotate-body{
		.display-box();
		.box-align();
		position: relative;
		width: 240pt;
    height: 240pt;
    margin: 100pt auto 0 auto;
		background: url(../img/rotate_background.png) no-repeat center center;
		background-size: 100%;
		.rotate-btn{
			.display-box();
			position: absolute;
			width: 40%;
			top: -3pt;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto auto;
		}
		#rotateBody{
			position: relative;
			margin: auto;
			.display-box();
			.box-align();
			width: 180pt;
		  height: 181pt;
		  top: -4pt;
		  left: 1pt;
		}
    .lucky-list {
      width: 150pt;
      height: 16pt;
      left: 45pt;
      font-size: 7pt;
      line-height: 2.5;
    }
	}

	.article-body{

		margin-top: 16pt;
		background: rgb(249, 163, 2);
		padding: 9pt 7pt;
		article{
			overflow-y:scroll;
			height: 210pt;
			background: #fff;
			border-radius: 8px;
			padding: 26pt 0.3rem;
			h6{
				color: rgb(2, 102, 134);
				font-size: 0.3rem;
				padding-bottom: 3pt;
			}
			.beizhu{
				font-size: 0.24rem;
			}
			p{
				font-size: 0.26rem;
				color: rgb(33, 23, 21);
			}
		}
	}

	footer{
		cursor: pointer;
		line-height: 32pt;
		text-align: center;
		height: 32pt;
		color: #fff;
		font-size: 0.3rem;
		width: 100%;
		background: rgb(153, 201, 213);
	}
}

// PC布局
@media screen and (min-width: 769px) {
	.alert,.alert-error{
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.5);
		.alert-body{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			background: #fff;
			height: 4.16rem;
			width: 5.7rem;
			h6{
				margin-bottom: 0;
				margin-top: 0;
				background: #265f73;
				color: #fff;
				height: 0.84rem;
				line-height: 0.84rem;
				text-align: center;
				font-size: 0.36rem;
			}
			p{
				margin: 0 auto;
				text-align: center;
				color: #265f73;
				font-size: 0.36rem;
				height: 0.36rem;
				line-height: 0.36rem;
			}
			img{
				margin-top: 0.4rem;
				margin-left: 2.6rem;
				width: 0.42rem;
				height: 0.42rem;
			}
			button{
				cursor: pointer;
				margin-left: 1.48rem;
				color: #fff;
				height: 0.76rem;
				border: none;
				width: 2.86rem;
				background: #265f73;
				font-size: 0.36rem;
			}
		}
	}
	html{
		background: rgb(238, 238, 241)
	}
	body{
		margin: 0 auto;
		width: 1280px;
	}
	.body{
		position: relative;
		width: 100%;
		height: 100%;
		background: url(../img/turntable_background_pc.jpg) no-repeat;
		background-size: cover;
	}
	.head-body{
		float: left;
		display: inline;
		margin-left: 240pt;
		margin-bottom: 4pt;
		.avatar{
			float: left;
			display: inline;
			margin-top: 284pt;
			img{
				width: 90pt;
				height: 90pt;
			}
			margin-right: 60pt;
		}
	}

	.rotate-body{
		float: left;
		position: relative;
		margin-top: 25pt;
		width: 370pt;
		height: 370pt;
		background: url(../img/rotate_background.png) no-repeat;
		background-size: 370pt;
		.rotate-btn{
			position: absolute;
			height: 146pt;
			width: 146pt;
		    top: 0;
		    bottom: 3pt;
		    left: 1pt;
		    right: 0;
			margin: auto;
		}
		#rotateBody{
			top: 0;
		    bottom: 11pt;
		    left: 0;
		    right: -2pt;
		    margin: auto;
		    position: absolute;
		    width: 278pt;
		}
	}

	.article-body{
		display: block;
		float: left;
		width: 495pt;
		height: 262pt;
		margin-top: 23pt;
		margin-left: 230pt;
		background: rgb(249, 163, 2);
		padding: 11pt 13pt;
		article{
			float: left;
			overflow-y:scroll;
			height: 210pt;
			background: #fff;
			border-radius: 8px;
			padding: 22pt 26pt;
			h6{
				color: rgb(2, 102, 134);
				font-size: 0.36rem;
				padding-bottom: 9pt;
			}
			p{
				font-size: 0.3rem;
				color: rgb(33, 23, 21);
			}
		}
	}
	.table-btn{
		margin: 0 auto;
		tr{
			padding-left: 10pt;
		}
		td{
			height: 33pt;
			color: rgb(91, 87, 86);
			font-size: 0.36rem;
			.btn-border{
				margin-left: 10pt;
				color: rgb(91, 87, 86);
				margin: 0 auto;
				border: 1px solid rgb(173, 173, 173);
				float: left;
				line-height: 33pt;
				height: 33pt;
				width: 207pt;
				img{
					float: left;
					width: 26pt;
					height: 26pt;
					margin: 3pt 10pt;
				}
				span{
					font-weight: normal;
					font-size: 0.36rem;
					float: left;
					line-height: 33pt;
				}
				span:nth-child(3){
					margin: 0 10pt;
				}
			}
			.btn-border:first-child{
				margin-left: 7pt;
				margin-right: 11pt;
			}
		}
	}
	.btn-body{
		display: none;
	}
	footer{
		display: block;
		float: left;
		cursor: pointer;
		line-height: 32pt;
		text-align: center;
		height: 32pt;
		color: #fff;
		font-size: 0.3rem;
		width: 100%;
		background: rgb(153, 201, 213);
	}
}



// iphone4等小屏机按钮适配
@media screen and (min-width: 321px) and (max-width: 768px) {
  .btn-body{
		.display-box();
		.box-orient(horizontal);
		.box-pack();
		color: rgb(91, 87, 86);
		font-size: 0.28rem;
		.btn-border{
			.display-box();
			.box-align();
			padding: 2pt 10pt 2pt 0;
			border: 1px solid rgb(173, 173, 173);
			border-radius: 4px;
			img{
				.display-box();
				.box-align();
				margin-left: 6pt;
				margin-right: 4pt;
				height: 19pt;
				width: auto;
			}
		}
		.btn-border:first-child{
			margin-right: 8pt;
		}
	}
}

// 大屏机按钮适配
@media screen and (max-width: 320px) {
	.btn-body{
		.display-box();
		.box-orient(horizontal);
		.box-pack();
		color: rgb(91, 87, 86);
		font-size: 0.26rem;
		.btn-border{
			.display-box();
			.box-align();
			padding: 2pt 4pt 2pt 0;
			border: 1px solid rgb(173, 173, 173);
			border-radius: 4px;
			img{
				.display-box();
				.box-align();
				margin-left: 1pt;
				margin-right: 1pt;
				height: 18pt;
				width: auto;
			}
			a{
				color: rgb(249, 163, 2);
			}
		}
		.btn-border:first-child{
			margin-right: 2pt;
		}
	}
}

.article-body{
	margin-bottom: 32pt;
}

.hide{
	display: none;
}
a{
	cursor: pointer;
	color: rgb(249, 163, 2);
}

.rotate-btn,footer{
	cursor: pointer;
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-102%);
  }
}
